<template>
  <div class="tab">
      <router-view/>
      <!-- 挡板 -->
      <div style="height:50px"></div>
     <van-tabbar v-model="active" @change="onChange">
        <van-tabbar-item :name="v.path"  v-for="v in tab" :key="v.txt">
            <span>{{v.txt}}</span>
            <template #icon="">             
              <i :class="['iconfont',v.icon]"></i>
            </template>
        </van-tabbar-item>
        
    </van-tabbar>
  </div>
</template>

<script>
export default {
     data () {
         return {
             tab:[
                 {txt:"首页",path:"/tab/home",icon:"icon-ind"},
                 {txt:"找房",path:"/tab/house",icon:"icon-findHouse"},
                 {txt:"收藏",path:"/tab/coll",icon:"icon-coll"},
                 {txt:"我的",path:"/tab/my",icon:"icon-myinfo"},
             ],
             active:"/tab/home"// 图标高亮 对应的路由路径
         }
     },
     methods:{
         onChange(){
            //  console.log(this.active);
             this.$router.push(this.active)
         }
     },
     watch:{
         $route:{
             handler(v){
                // console.log(v);
                this.active=v.path// 高亮跟当前路由的变化对应
             },
             deep:true,// 深度监听
             immediate:true// 初始加载就监听
         }
     }
}
</script>

<style>

</style>
